<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">商城购物券</block>
		</cu-custom>
		<view class="bg02" :style="'background-image:url(' + imgurl + 'bg02.png)'">
			<view class="qui-cells qui-card">
				<view class="qui-cell">
					<view class="cell-hd" style="margin-right: 60upx;">
						<view class="fs38 fw600 text-main">
							￥
							<text class="ff fs70">{{data.CodeFace}}</text>
						</view>
					</view>
					<view class="cell-bd">
						<view class="fs32 fw600">{{data.Title}}</view>
						<view class="fs24 text-muted">{{data.MinStr}}</view>
						<view class="fs20 text-muted">{{data.Time}}</view>
					</view>
				</view>
			</view>

			<view class="qui-cells qui-card">
				<view class="qui-cell">
					<view class="cell-hd">适用商品</view>
					<view class="cell-bd">
						<picker @change="PickerChange" :value="index" :range="picker">
							<view class="picker fw600 fs26" style="text-align: left;">{{ picker[index] }}</view>
						</picker>
					</view>
					<view class="arrow-r"></view>
				</view>
			</view>

			<view class="qui-cells qui-card">
				<view class="qui-cell">
					<view class="cell-bd">
						<view class="fs26 fw600">使用说明</view>
						<view class="fs22 text-gray mt20">1、优惠券有使用期限限制，过了有效期不能使用；</view>
						<view class="fs22 text-gray">2、订单中包含特价商品时不能使用优惠券，优惠券不能与其他优惠（如促销活动）同时使用；</view>
						<view class="fs22 text-gray">3、优惠券只能抵扣订单金额，优惠金额超出订单金额部分不能再次使用，不能兑换现金；</view>
						<view class="fs22 text-gray">4、每个订单只能使用一张优惠券；</view>
						<view v-show="openbox">
							<view class="fs22 text-gray">2、订单中包含特价商品时不能使用优惠券，优惠券不能与其他优惠（如促销活动）同时使用；</view>
							<view class="fs22 text-gray">3、优惠券只能抵扣订单金额，优惠金额超出订单金额部分不能再次使用，不能兑换现金；</view>
							<view class="fs22 text-gray">4、每个订单只能使用一张优惠券；</view>
						</view>
						<view @tap="showbox" class="tc flex justify-center align-center mt30" style="background-color: #f6f6f6;">
							<view class="cell-ft fs20">展开全部</view>
							<view class="arrow-r"></view>
						</view>
					</view>
				</view>
			</view>
			<navigator url="" class="uni-btns text-bold"><button class="uni-btn-main radio uni-btn fs30">去使用</button></navigator>
			<view class="flex justify-around align-center plr30">
				<view>
					<image :src="imgurl + '/img01.png'" class="img30"></image>
					<text class="fs26 fw600">赠送好友</text>
				</view>
				<view style="color: #dedede;">|</view>
				<view>
					<image :src="imgurl + '/img02.png'" class="img30"></image>
					<text class="fs26 fw600">收藏到微信卡包</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import base from 'utils/base.js';
export default {
	data() {
		return {
			data:{},
			index: 0,
			picker: [],
			openbox: false,
			imgurl: this.$imgurl
		};
	},
	methods: {
		PickerChange(e) {
			this.index = e.detail.value;
		},
		showbox() {
			this.openbox = !this.openbox;
		}
	},
	onLoad(e) {
		var t = this;
		let params = {
			type: 'GET',
			url: '/api/Card/GetMemberCardDetails',
			data: {
				lng: 0,
				lat: 0,
				codeId: e.codeId
			},
			sCallback: function(response) {
				t.data = response.Data.Data;
				t.picker = response.Data.Data.Products;
			}
		};
		base.request(params);
	}
};
</script>

<style lang="scss">
.bg02 {
	background-size: 100%;
	height: 200upx;
	background-repeat: no-repeat;
	padding-top: 5upx;
}
.img30 {
	width: 30upx;
	height: 30upx;
	position: relative;
	top: 5upx;
	margin-right: 10upx;
}
</style>
